<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>Gerador de código fonte para interfaces Web</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" />
<!-- Jquery -->
<link rel="stylesheet" type="text/css" media="screen" href="../js/jquery-ui-1.7.2.custom/css/smoothness/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jquery.jqGrid-3.5.2/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../js/jquery-treeview/jquery.treeview.css" />

<!-- GeCo -->
<link rel="stylesheet" type="text/css" media="screen" href="../css/geco.css"></link>
<script src="../js/jquery.jqGrid-3.5.2/js/jquery-1.3.2.min.js"	type="text/javascript"></script>
<script src="../js/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"	type="text/javascript"></script>
<script src="../js/jquery.jqGrid-3.5.2/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid-3.5.2/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid-3.5.2/src/grid.custom.js" type="text/javascript"></script>
<script src="../js/jquery-treeview/jquery.treeview.min.js" type="text/javascript"></script>
<script src="../js/Utils.js" type="text/javascript"></script>
<script src="combinacao.js" type="text/javascript"></script>
<script src="../js/geco.js"></script>

<style type="text/css">
    body {
        font-size: 80%;
    }
    .rotulo {
        text-align: right;
        width: 30px;
    }
</style>

</head>

<body class="change-list">

<!-- Container -->
<div id="container"><!-- Header -->
<div id="header">
<div id="branding">
<h1 id="site-name">Gerador de código fonte para interfaces Web</h1>
</div>
<div id="user-tools"></div>
</div>
<!-- END Header -->

<div class="breadcrumbs"><a href="../main.html"> Início </a>
&rsaquo; Combinações &rsaquo; </div>
<table style="width: 100%;">

	<tr>
		<td colspan="2">
		<h3>Cadastro de Combinação</h3>
		</td>
	</tr>

	<tr>
		<td style="width: 30%;">
		<ul id="modelTree"></ul>
		<div id="attributeDiv"></div>
		</td>
		<td style="width: 70%;">
		<div id="accordion">

		<h3><a href="#">Combinação</a></h3>
		<div>
		<form id="combinacaoForm">
			
			<table>
				
				<tr>
					<td class="rotulo"><label>Modelo:</label></td>
					<td>
						<input type="text" readonly="readonly" name="modelo.id" /> 
						<input type="text" readonly="readonly" name="modelo.descricao" />
					</td>
				</tr>
				
				<tr>
					<td class="rotulo"><label>Código:</label></td>
					<td>
						<input type="text" readonly="readonly" name="id" />
					</td>
				</tr>
				
				<tr>
					<td class="rotulo"><label>Descrição:</label></td>
					<td>
						<input type="text" name="descricao" />
					</td>
				</tr>
				
			</table>
			
			<p>
				<input type="button" id="buttonRemoverCombinacao" value="Remover" style="text-align:right;"/>
				<input type="button" id="buttonSalvarCombinacao" value="Salvar" style="text-align:right;"/>
			</p>
		
		</form>
		</div>

		<h3><a href="#" id="headerTemplate">Template</a></h3>
		<div>
		<form id="templateForm">

		<input type="hidden" name="id"></input>
		<input type="hidden" name="chaveObjetoModelo"></input>
		<input type="hidden" name="combinacao.id"></input>

		<div id="tabs">
		<ul>
			<li><a href="#tabs-1">Fonte</a></li>
			<li><a href="#tabs-2">Detalhes</a></li>
		</ul>
		<div id="tabs-1">	
		<p><textarea style="width: 100%;height:150px" name="template.fonte"></textarea></p>
		</div>
		<div id="tabs-2">
			
			<table>
				
				<tr>
					<td class="rotulo"><label>Código:</label></td>
					<td>
						<input type="text" readonly="readonly" name="template.id" />
					</td>
				</tr>
				
				<tr>
					<td class="rotulo"><label>Ordem:</label></td>
					<td>
						<input type="text" name="ordem" />
					</td>
				</tr>
				
				<tr>
					<td class="rotulo"><label>Sigla:</label></td>
					<td>
						<input type="text" name="template.sigla" />
					</td>
				</tr>
				
				<tr>
					<td class="rotulo"><label>Descrição:</label></td>
					<td>
						<input type="text" name="template.descricao" />
					</td>
				</tr>
				
			</table>
		
		</div>
		</div>
		</form>

		<br />

		<div style="text-align: right;"><input type="button"
			id="buttonBuscarCombinacaoTemplate" value="Buscar Template" /> <input
			type="button" id="buttonSalvarCombinacaoTemplate"
			value="Salvar Template" /></div>

		</div>

		<h3 id="assoc"><a href="#">Associações</a></h3>
		<div>
		<table id="gridAssociacoes"></table>
		</div>

		<h3><a href="#">Geração de Código</a></h3>
		<div>
		<div>
			<div>
				<pre id="codePanel" style="width: 100%; height: 200px; overflow: scroll;"></pre>
			</div>
			<div style="text-align: right;">
				<input type="button" id="buttonGerarCodigo" value="Gerar Código" />
			</div>
		</div>

		</div>
		</td>
	</tr>
</table>
</body>
</html>